<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <!-- 引入 cdn 的 ECharts 文件 -->
  <script src="https://cdn.bootcss.com/echarts/4.2.0-rc.2/echarts.min.js"></script>
  <title>k线图</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
  </style>
</head>
<body>

<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 1920px;height:800px;"></div>

</body>
</html>

<script>
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById('main'))

  // app.title = '2015 年上证指数';
  /*时间的格式化: 把GMT时间格式化成2018-12-24 16:01:00*/
  function formatTime(date) {
    // console.log(date)
    var Y = date.getFullYear() + '/'
    var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '/'
    var D = date.getDate()
    if (D < 10) {
      D = '0' + D + ' '
    } else {
      D = D + ' '
    }
    var h = date.getHours()
    if (h < 10) {
      h = '0' + h + ":"
    } else {
      h = h + ":"
    }
    var m = date.getMinutes()
    if (m < 10) {
      m = '0' + m + ":"
    } else {
      m = m + ":"
    }
    var s = date.getSeconds()
    if (s < 10) s = '0' + s
    return Y + M + D + h + m + s
    // console.log(Y + M + D + h + m + s)
    // 输出结果：2018-12-24 16:01:00
  }

  var rawData = [
    // Date.now()是获取当前时间的总毫秒数
    // Date.now() - 97000是把时间推前97秒
    // new Date(Date.now() - 97000)是GMT格式时间(Mon Dec 24 2018 15:50:40 GMT+0800 (中国标准时间))
    [formatTime(new Date(Date.now() - 1000)), '3570.47', '3539.18', '-33.69', '-0.94%', '3538.35', '3580.6', '176963664', '25403106', '-'],
    [formatTime(new Date(Date.now() - 2000)), '3566.73', '3572.88', '9.14', '0.26%', '3538.11', '3573.68', '187889600', '26778766', '-'],
    [formatTime(new Date(Date.now() - 3000)), '3528.4', '3563.74', '29.96', '0.85%', '3515.52', '3564.17', '182551920', '25093890', '-'],
    [formatTime(new Date(Date.now() - 4000)), '3635.77', '3533.78', '-94.13', '-2.59%', '3533.78', '3641.59', '269983264', '36904280', '-'],
    [formatTime(new Date(Date.now() - 5000)), '3614.05', '3627.91', '15.43', '0.43%', '3601.74', '3635.26', '198451120', '27466004', '-'],
    [formatTime(new Date(Date.now() - 6000)), '3631.31', '3612.49', '-23.6', '-0.65%', '3572.28', '3640.22', '227785216', '31542126', '-'],
    [formatTime(new Date(Date.now() - 7000)), '3653.28', '3636.09', '-15.68', '-0.43%', '3633.03', '3684.57', '298201792', '41990292', '-'],
    [formatTime(new Date(Date.now() - 8000)), '3645.99', '3651.77', '9.3', '0.26%', '3616.87', '3652.63', '261178752', '36084604', '-'],
    [formatTime(new Date(Date.now() - 9000)), '3568.58', '3642.47', '63.51', '1.77%', '3565.75', '3651.06', '299849280', '39831696', '-'],
    [formatTime(new Date(Date.now() - 10000)), '3574.94', '3578.96', '-1.03', '-0.03%', '3568.16', '3614.7', '273707904', '36538580', '-'],
    [formatTime(new Date(Date.now() - 11000)), '3533.63', '3580', '63.81', '1.81%', '3533.63', '3583.41', '283856480', '38143960', '-'],
    [formatTime(new Date(Date.now() - 12000)), '3522.09', '3516.19', '5.83', '0.17%', '3506.29', '3538.69', '193482304', '26528864', '-'],
    [formatTime(new Date(Date.now() - 13000)), '3518.13', '3510.35', '-10.31', '-0.29%', '3496.85', '3529.96', '200471344', '27627494', '-'],
    [formatTime(new Date(Date.now() - 14000)), '3403.51', '3520.67', '86.09', '2.51%', '3399.28', '3521.78', '215374624', '27921354', '-'],
    [formatTime(new Date(Date.now() - 15000)), '3441.6', '3434.58', '-20.91', '-0.61%', '3410.92', '3455.55', '182908880', '24507642', '-'],
    [formatTime(new Date(Date.now() - 16000)), '3469.81', '3455.5', '-16.94', '-0.49%', '3446.27', '3503.65', '200427520', '27949970', '-'],
    [formatTime(new Date(Date.now() - 17000)), '3462.58', '3472.44', '2.37', '0.07%', '3454.88', '3495.7', '195698848', '26785488', '-'],
    [formatTime(new Date(Date.now() - 18000)), '3518.65', '3470.07', '-66.86', '-1.89%', '3466.79', '3518.65', '224367312', '29782174', '-'],
    [formatTime(new Date(Date.now() - 19000)), '3529.81', '3536.93', '11.94', '0.34%', '3506.62', '3543.95', '208302576', '28056158', '-'],
    [formatTime(new Date(Date.now() - 20000)), '3558.15', '3524.99', '-59.83', '-1.67%', '3510.41', '3568.97', '251736416', '31976682', '-'],
    [formatTime(new Date(Date.now() - 21000)), '3525.73', '3584.82', '47.92', '1.35%', '3517.23', '3591.73', '281111232', '33885908', '-'],
    [formatTime(new Date(Date.now() - 22000)), '3450.28', '3536.91', '80.6', '2.33%', '3427.66', '3538.85', '301491488', '36918304', '-'],
    [formatTime(new Date(Date.now() - 23000)), '3442.44', '3456.31', '10.9', '0.32%', '3417.54', '3483.41', '252390752', '33025674', '-'],
    [formatTime(new Date(Date.now() - 24000)), '3433.85', '3445.4', '9.1', '0.26%', '3327.81', '3470.37', '304197888', '38750364', '-'],
    [formatTime(new Date(Date.now() - 25000)), '3616.54', '3436.3', '-199.25', '-5.48%', '3412.43', '3621.9', '354287520', '46431124', '-'],
    [formatTime(new Date(Date.now() - 26000)), '3659.57', '3635.55', '-12.38', '-0.34%', '3629.86', '3668.38', '306761600', '42624744', '-'],
    [formatTime(new Date(Date.now() - 27000)), '3614.07', '3647.93', '31.82', '0.88%', '3607.52', '3648.37', '273024864', '38080292', '-'],
    [formatTime(new Date(Date.now() - 28000)), '3602.89', '3616.11', '5.79', '0.16%', '3563.1', '3616.48', '248810512', '32775852', '-'],
    [formatTime(new Date(Date.now() - 29000)), '3630.87', '3610.31', '-20.18', '-0.56%', '3598.87', '3654.75', '315997472', '41414824', '-'],
    [formatTime(new Date(Date.now() - 30000)), '3620.79', '3630.5', '13.44', '0.37%', '3607.92', '3640.53', '310801984', '41391088', '-'],
    [formatTime(new Date(Date.now() - 31000)), '3573.78', '3617.06', '48.59', '1.36%', '3561.04', '3618.21', '247915584', '32844260', '-'],
    [formatTime(new Date(Date.now() - 32000)), '3605.06', '3568.47', '-36.33', '-1.01%', '3558.7', '3617.07', '297580736', '39233876', '-'],
    [formatTime(new Date(Date.now() - 33000)), '3629.98', '3604.8', '-2.16', '-0.06%', '3598.07', '3678.27', '383575456', '52152036', '-'],
    [formatTime(new Date(Date.now() - 34000)), '3522.46', '3606.96', '26.12', '0.73%', '3519.42', '3607.61', '276187040', '36942184', '-'],
    [formatTime(new Date(Date.now() - 35000)), '3600.76', '3580.84', '-52.06', '-1.43%', '3564.81', '3632.56', '345870944', '46866864', '-'],
    [formatTime(new Date(Date.now() - 36000)), '3656.82', '3632.9', '-17.35', '-0.48%', '3603.23', '3659.31', '361717600', '48283260', '-'],
    [formatTime(new Date(Date.now() - 37000)), '3635', '3650.25', '9.76', '0.27%', '3605.62', '3654.88', '360972672', '46782220', '-'],
    [formatTime(new Date(Date.now() - 38000)), '3617.4', '3640.49', '-6.4', '-0.18%', '3607.89', '3669.53', '429746592', '56005512', '-'],
    [formatTime(new Date(Date.now() - 39000)), '3588.5', '3646.88', '56.85', '1.58%', '3588.5', '3673.76', '503016704', '63618404', '-'],
    [formatTime(new Date(Date.now() - 40000)), '3514.44', '3590.03', '67.21', '1.91%', '3508.83', '3596.38', '429167040', '54328220', '-'],
    [formatTime(new Date(Date.now() - 41000)), '3459.22', '3522.82', '63.18', '1.83%', '3455.53', '3585.66', '553254976', '67867464', '-'],
    [formatTime(new Date(Date.now() - 42000)), '3325.62', '3459.64', '142.94', '4.31%', '3325.62', '3459.65', '339078752', '42610440', '-'],
    [formatTime(new Date(Date.now() - 43000)), '3330.32', '3316.7', '-8.39', '-0.25%', '3302.18', '3346.27', '192897440', '24436056', '-'],
    [formatTime(new Date(Date.now() - 44000)), '3337.58', '3325.08', '-57.48', '-1.70%', '3322.31', '3391.06', '230951136', '28601932', '-'],
    [formatTime(new Date(Date.now() - 45000)), '3380.28', '3382.56', '-4.75', '-0.14%', '3346.59', '3417.2', '243595120', '30726678', '-'],
    [formatTime(new Date(Date.now() - 46000)), '3387.77', '3387.32', '12.12', '0.36%', '3362.51', '3411.71', '235676016', '29450842', '-'],
    [formatTime(new Date(Date.now() - 47000)), '3417.01', '3375.2', '-59.14', '-1.72%', '3367.23', '3439.76', '293523296', '36165620', '-'],
    [formatTime(new Date(Date.now() - 48000)), '3409.14', '3434.34', '4.76', '0.14%', '3332.62', '3441.57', '328172768', '40888724', '-'],
    [formatTime(new Date(Date.now() - 49000)), '3448.65', '3429.58', '17.15', '0.50%', '3402', '3457.52', '365560864', '45394252', '-'],
    [formatTime(new Date(Date.now() - 50000)), '3377.55', '3412.43', '43.7', '1.30%', '3360.22', '3422.02', '347372864', '42526308', '-'],
    [formatTime(new Date(Date.now() - 51000)), '3292.29', '3368.74', '48.06', '1.45%', '3282.99', '3373.78', '323739328', '37545200', '-'],
    [formatTime(new Date(Date.now() - 52000)), '3428.56', '3320.68', '-104.65', '-3.06%', '3265.44', '3447.26', '458455424', '51850924', '-'],
    [formatTime(new Date(Date.now() - 53000)), '3377.55', '3425.33', '38.63', '1.14%', '3357.86', '3425.52', '318973760', '38358252', '-'],
    [formatTime(new Date(Date.now() - 54000)), '3401.63', '3386.7', '-4.65', '-0.14%', '3355.57', '3423.4', '378112160', '45330364', '-'],
    [formatTime(new Date(Date.now() - 55000)), '3358.3', '3391.35', '53.28', '1.60%', '3334.85', '3393.02', '395460576', '45944784', '-'],
    [formatTime(new Date(Date.now() - 56000)), '3255.03', '3338.07', '75.63', '2.32%', '3254.39', '3338.3', '316283840', '36256556', '-'],
    [formatTime(new Date(Date.now() - 57000)), '3280.02', '3262.44', '-30.79', '-0.93%', '3256.25', '3307.32', '295077760', '33027752', '-'],
    [formatTime(new Date(Date.now() - 58000)), '3262.16', '3293.23', '5.57', '0.17%', '3253.25', '3298.63', '297153120', '33480608', '-'],
    [formatTime(new Date(Date.now() - 59000)), '3193.54', '3287.66', '104.51', '3.28%', '3188.41', '3318.71', '386294688', '43554100', '-'],
    [formatTime(new Date(Date.now() - 60000)), '3146.64', '3183.15', '39.79', '1.27%', '3137.79', '3192.72', '234851456', '25637910', '-'],
    [formatTime(new Date(Date.now() - 61000)), '3156.07', '3143.36', '90.58', '2.97%', '3133.13', '3172.28', '234276048', '25883034', '-'],
    [formatTime(new Date(Date.now() - 62000)), '3052.84', '3052.78', '14.64', '0.48%', '3039.74', '3073.3', '146642448', '15656919', '-'],
    [formatTime(new Date(Date.now() - 63000)), '3055.22', '3038.14', '-62.62', '-2.02%', '3021.16', '3068.3', '163222672', '16968660', '-'],
    [formatTime(new Date(Date.now() - 64000)), '3085.57', '3100.76', '8.41', '0.27%', '3042.31', '3103.07', '156727536', '16642240', '-'],
    [formatTime(new Date(Date.now() - 65000)), '3130.85', '3092.35', '-50.34', '-1.60%', '3063', '3149.95', '236263872', '24897112', '-'],
    [formatTime(new Date(Date.now() - 66000)), '3126.49', '3142.69', '26.8', '0.86%', '3109.69', '3151.16', '212887712', '23136904', '-'],
    [formatTime(new Date(Date.now() - 67000)), '3137.72', '3115.89', '-69.73', '-2.19%', '3104.74', '3164.04', '236322672', '25756004', '-'],
    [formatTime(new Date(Date.now() - 68000)), '3161.32', '3185.62', '29.08', '0.92%', '3152.48', '3213.48', '274786176', '30507132', '-'],
    [formatTime(new Date(Date.now() - 69000)), '3072.09', '3156.54', '58.62', '1.89%', '3060.86', '3159.88', '239897360', '25979668', '-'],
    [formatTime(new Date(Date.now() - 70000)), '3100.28', '3097.92', '11.86', '0.38%', '3070.34', '3122.05', '209175392', '21844244', '-'],
    [formatTime(new Date(Date.now() - 80000)), '3131.98', '3086.06', '-66.2', '-2.10%', '3085.31', '3204.7', '317602912', '33739328', '-'],
    [formatTime(new Date(Date.now() - 81000)), '2998.04', '3152.26', '147.09', '4.89%', '2983.54', '3182.93', '277524512', '28199226', '-'],
    [formatTime(new Date(Date.now() - 82000)), '3043.8', '3005.17', '-109.63', '-3.52%', '2983.92', '3081.7', '249194448', '24390460', '-'],
    [formatTime(new Date(Date.now() - 83000)), '3221.17', '3114.8', '-85.44', '-2.67%', '3049.23', '3229.48', '346631168', '37357680', '-'],
    [formatTime(new Date(Date.now() - 84000)), '3189.48', '3200.23', '2.34', '0.07%', '3163.45', '3223.76', '224557808', '25276946', '-'],
    [formatTime(new Date(Date.now() - 85000)), '3190.55', '3197.89', '-45.2', '-1.39%', '3178.9', '3243.28', '273261760', '29958108', '-'],
    [formatTime(new Date(Date.now() - 86000)), '3182.55', '3243.09', '72.64', '2.29%', '3165.7', '3256.74', '375328000', '41299144', '-'],
    [formatTime(new Date(Date.now() - 87000)), '3054.44', '3170.45', '90.03', '2.92%', '3011.12', '3174.71', '255415456', '26391038', '-'],
    [formatTime(new Date(Date.now() - 88000)), '3149.38', '3080.42', '-79.75', '-2.52%', '3066.3', '3217.58', '296468096', '30268972', '-'],
    [formatTime(new Date(Date.now() - 89000)), '3027.68', '3160.17', '-6.46', '-0.20%', '3019.09', '3194.48', '438170176', '42326236', '-'],
    [formatTime(new Date(Date.now() - 90000)), '3157.83', '3166.62', '-39.36', '-1.23%', '3053.74', '3180.33', '432432448', '42041164', '-'],
    [formatTime(new Date(Date.now() - 91000)), '3203.56', '3205.99', '-26.36', '-0.82%', '3109.16', '3207.86', '397431392', '43106860', '-'],
    [formatTime(new Date(Date.now() - 92000)), '3125.26', '3232.35', '148.76', '4.82%', '3102.95', '3235.84', '443136928', '47463100', '-'],
    [formatTime(new Date(Date.now() - 93000)), '2978.03', '3083.59', '156.3', '5.34%', '2906.49', '3085.42', '400308384', '40428928', '-'],
    [formatTime(new Date(Date.now() - 94000)), '2980.79', '2927.29', '-37.68', '-1.27%', '2850.71', '3092.04', '466699680', '46178896', '-'],
    [formatTime(new Date(Date.now() - 95000)), '3004.13', '2964.97', '-244.94', '-7.63%', '2947.94', '3123.03', '352325088', '35873576', '-'],
    [formatTime(new Date(Date.now() - 96000)), '3373.48', '3209.91', '-297.84', '-8.49%', '3191.88', '3388.36', '334671776', '35881888', '-'],
    [formatTime(new Date(Date.now() - 97000)), '3609.96', '3507.74', '-156.55', '-4.27%', '3490.54', '3652.84', '369920480', '45061648', '-'],
  ].reverse()

  function calculateMA(dayCount, data) {
    var result = []
    for (var i = 0, len = data.length; i < len; i++) {
      if (i < dayCount) {
        result.push('-')
        continue
      }
      var sum = 0
      for (var j = 0; j < dayCount; j++) {
        sum += data[i - j][1]
      }
      result.push(sum / dayCount)
    }
    return result
  }


  var dates = rawData.map(function (item) {
    return item[0]
  })

  var data = rawData.map(function (item) {
    return [+item[1], +item[2], +item[5], +item[6]]
  })

  // 指定图表的配置项和数据
  var option = {
    title: {
      // text: '2015 年上证指数',
      // left: 0
    },
    backgroundColor: '#21202D',
    legend: { // 图例组件
      data: ['日K', 'MA5', 'MA10', 'MA20', 'MA30'],
      inactiveColor: '#777',
      textStyle: {
        color: '#fff'
      }
    },
    tooltip: { // 提示文本
      trigger: 'axis',
      axisPointer: {
        animation: false,
        type: 'cross',
        lineStyle: {
          color: '#376df4',
          width: 2,
          opacity: 1
        }
      }
    },
    xAxis: { // x轴
      type: 'category', // 类目
      data: dates,
      axisLine: {lineStyle: {color: '#8392A5'}},

      boundaryGap: false, // false表示横坐标刻度对应的数据

      splitNumber: 20, // 横坐标刻度的间隔 默认是最后一位数的 default: 5  20就间隔25

    },
    yAxis: { // y轴
      scale: true,
      axisLine: {lineStyle: {color: '#8392A5'}},
      splitLine: {show: false}, // 是否显示横线
    },
    grid: { // 直角坐标系内绘图网格
      bottom: 80
    },
    dataZoom: [ // dataZoom 组件 用于区域缩放
      {
        textStyle: {
          color: '#8392A5'
        },
        handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
        handleSize: '80%',
        dataBackground: {
          areaStyle: {
            color: '#8392A5'
          },
          lineStyle: {
            opacity: 0.8,
            color: '#8392A5'
          }
        },
        handleStyle: {
          color: '#fff',
          shadowBlur: 3,
          shadowColor: 'rgba(0, 0, 0, 0.6)',
          shadowOffsetX: 2,
          shadowOffsetY: 2
        }
      },
      {
        type: 'inside'
      },
    ],
    animation: false,
    series: [ // 系列列表。每个系列通过 type 决定自己的图表类型
      {
        type: 'candlestick', // K线图
        name: '日K',
        data: data,
        itemStyle: {
          normal: {
            color: '#FD1050',
            color0: '#0CF49B',
            borderColor: '#FD1050',
            borderColor0: '#0CF49B'
          }
        }
      },
      {
        name: 'MA5',
        type: 'line',
        data: calculateMA(5, data),
        smooth: true,
        showSymbol: false,
        lineStyle: {
          normal: {
            width: 1
          }
        }
      },
      {
        name: 'MA10',
        type: 'line',
        data: calculateMA(10, data),
        smooth: true,
        showSymbol: false,
        lineStyle: {
          normal: {
            width: 1
          }
        }
      },
      {
        name: 'MA20',
        type: 'line',
        data: calculateMA(20, data),
        smooth: true,
        showSymbol: false,
        lineStyle: {
          normal: {
            width: 1
          }
        }
      },
      {
        name: 'MA30',
        type: 'line',
        data: calculateMA(30, data),
        smooth: true,
        showSymbol: false,
        lineStyle: {
          normal: {
            width: 1
          }
        }
      }
    ]
  }

  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option)
</script>